<template>
  <!--
    el-table
        data:数据绑定
        el-table-column  每一栏
            label:标题
            prop:需要渲染的字段名
            type:index  序号
          自定义栏：作用域插槽  v-slot="{$index,row}"
                     $index:下标
                     row:每一行的内容
 -->

  <div>
    <el-table :data="tableData">
      <el-table-column label="序号" type="index" />
      <el-table-column label="序号2" type="index" width="90px">
        <template v-slot="{$index}">
          {{ $index+1 }}
        </template>
      </el-table-column>
      <el-table-column label="日期" prop="date" />
      <el-table-column label="日期2">
        <template v-slot="{row}">
          {{ row.date }}
        </template>
      </el-table-column>
      <el-table-column label="姓名" prop="name" />
      <el-table-column label="地址" prop="address" />
      <el-table-column label="操作">
        <template v-slot="{$index,row}">
          <el-button type="success">分配权限</el-button>
          <el-button type="primary">编辑</el-button>
          <el-button type="danger">删除</el-button>
          <span>{{ $index }}----{{ row }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  }
}
</script>
<style>
</style>
